<template>
  <div>
    <!--    学生日志信息管理 <br>-->
    <!--    学生外出请假信息和生活学习消费等日志信息管理-->
    <div style="">
      <div style="margin: 10px">
        <el-button type="primary" @click="do_create">添加</el-button>
      </div>

      <div style="margin: 10px">
        <!--TODO        注意查询数据放在student内部-->
        <el-input v-model="queryData.data.studentNum" placeholder="请输入学号查询" style="width: 20%" clearable></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="do_query">查询</el-button>
      </div>
    </div>
    <el-table
        :data="tableData"
        border
        style="width: 100%; height: 400px">
      <el-table-column
          prop="id"
          label="id"
          width=""
          v-if="false">
      </el-table-column>
      <!--TODO      注意 学号在tableData中的student内部-->
      <el-table-column
          prop="student.id"
          label="学号"
          width="100px">
      </el-table-column>
      <el-table-column
          prop="student.studentName"
          label="姓名"
          width="100px">
      </el-table-column>
      <!--TODO      formatter函数用来进行实践类型的字符化-->
      <el-table-column
          prop="outingLocation"
          label="外出地点"
          width="150">
      </el-table-column>
      <el-table-column
          prop="outingTime"
          label="外出时间">
      </el-table-column>
      <el-table-column
          prop="comingTime"
          label="到校时间">
      </el-table-column>
      <el-table-column width="150px"
                       label="操作">
        <!--       在列中插入按钮，使用scope.row进行获取当前行操作 -->
        <template slot-scope="scope">
          <el-button size="mini" type="success" round @click="do_edit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" round @click="do_delete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
        style="margin-top: 20px"
    >
    </el-pagination>

    <el-dialog
        title="学生信息操作"
        :visible.sync="this.$data.dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form label-position="left" label-width="100px" :model="formData">
        <el-form-item label="id" v-if="false">
          <el-input v-model="formData.id"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-select v-model="formData.studentId" placeholder="请选择" :disabled="theDisable">
            <el-option
                v-for="item in StudentAll"
                :key="item.id"
                :label="item.id"
                :value="item.id">
              <span style="float: left">{{ item.id }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.studentName }}</span>
            </el-option>
          </el-select>
          <!--          <el-input v-model="formData.studentId" :disabled="theDisable"></el-input>-->
        </el-form-item>

        <el-form-item label="姓名" v-if="creating">
          <el-input v-model="formData.studentName" :disabled="theDisable"></el-input>
        </el-form-item>
        <!--TODO    使用下拉框（Element的选择器Select）进行选择-->
        <el-form-item label="外出地点">
          <el-input v-model="formData.outingLocation"></el-input>
        </el-form-item>
        <el-form-item label="外出时间">
          <el-date-picker
              v-model="formData.outingTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="返校时间">
          <el-date-picker
              v-model="formData.comingTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="do_cancel" style="margin-left: 160px">取 消</el-button>
      <el-button type="primary" size="mini" @click="save">保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteLeavingInfo,
  getLeavingInfo,
  updateLeavingInfo,
} from "@/api/data";

export default {
  name: "StudentLogInfo",
  data() {
    /*
    TODO--添加变量
    对应student_practice表
    属性：id,practiceName(实践名称),practiceType(实践类型),practiceDate(活动日期),practiceDescription(活动描述)
    practiceType使用下拉列表选择，取值在社会实践、竞赛、科技创新、讲座、外出实践之间
    */
    return {
      //formData里面不能有对象！
      formData: {
        id: null,
        studentId: null,
        comingTime: null,
        outingTime: null,
        outingLocation: null,
      },
      creating: true,
      theDisable: false,
      dialogVisible: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      tableData: {
        id: null,
        student: {
          id: null,
          studentName: null
        },
        comingTime: null,
        outingTime: null,
        outingLocation: null,
      },
      StudentAll: [],
      queryData: {
        data: {
          currentPage: 1,  //当前的页码
          studentNum: null
        }
      },
    }
  },
  methods: {
    handleClose() {
      this.$data.dialogVisible = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$data.queryData.currentPage = val
      //获取分页的数据
      this.queryData.data.currentPage = val
      getLeavingInfo(this.$data.queryData).then(res => {
        this.tableData = res.data.tableData
        this.total = res.data.total
      })
    },
    do_cancel() {
      this.$data.dialogVisible = false;
      this.do_query();
    },
    do_query() {
      getLeavingInfo(this.$data.queryData).then(res => {
        this.tableData = res.data.tableData
        this.total = res.data.total
        this.StudentAll = res.data.studentList
        console.log(this.StudentAll)

      })
    },
    do_create() {
//TODO 注意！这里formData必须这样写（里面写个student:{}），不然弹出框出不来
      this.$data.formData = {
        student: {},
      }
      this.$data.theDisable = false
      this.$data.dialogVisible = true
      this.$data.creating = false
    },
    do_edit(data) {
      this.creating = true
      this.$data.theDisable = true //设置学号不可编辑
      this.$data.dialogVisible = true
      this.$data.formData = data
      this.$data.formData.studentId = data.student.id
      this.$data.formData.studentName = data.student.studentName
      // this.$data.formData.practiceTypeId = data.practiceType.id
    },
    save() {
      let updateAndCreateData = {
        data: {
          formData: this.formData
        }
      }
      //对时间进行校验
      if (updateAndCreateData.data.formData.outingTime != null && updateAndCreateData.data.formData.comingTime != null) {
        let startTmp = updateAndCreateData.data.formData.outingTime.replace(" ", ":").replace(/\:/g, "-").split("-");
        let endTmp = updateAndCreateData.data.formData.comingTime.replace(" ", ":").replace(/\:/g, "-").split("-");
        let sd = new Date(startTmp[0], startTmp[1], startTmp[2], startTmp[3], startTmp[4], startTmp[5]);
        let ed = new Date(endTmp[0], endTmp[1], endTmp[2], endTmp[3], endTmp[4], endTmp[5]);

        if (sd.getTime() >= ed.getTime()) {
          this.$message({
            type: 'info',
            message: '学生离校时间不能早于返校日期！！'
          })
          return
        }
      }
      this.$data.dialogVisible = false
      console.log(updateAndCreateData);
      updateLeavingInfo(updateAndCreateData).then(res => {
        this.$data.dialogVisible = false
        if (res.code === "0") {  //表示进行编辑操作
          this.$message({
            type: 'success',
            message: '更新成功！'
          })
          this.do_query()
        } else if (res.code === "1") {  //表示进行新增操作
          this.$message({
            type: "success",
            message: "添加成功！"
          })
          this.do_query()
        } else {
          this.$message({
            type: 'info',
            message: '操作失败！'
          })
        }
        this.$data.formData = {}  //清空form表单
      })
    },
    do_delete(theId) {
      this.$confirm('此操作将永久删除该外出活动！是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //用户点击确认按钮
        let deleteData = {
          data: {
            deleteId: theId
          }
        }
        deleteLeavingInfo(deleteData).then(res => {
          //重新查询表格数据
          this.do_query()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
  ,
  mounted() {
    if (sessionStorage.getItem("id") != "0") {
      this.queryData.data.studentNum = sessionStorage.getItem("id")
      this.do_query()
      sessionStorage.setItem("id", "0")
    } else {
      this.do_query()
    }
  }
}
</script>

<style scoped>

</style>
